<template>
  <div>
    <div class="articleContent">
      <div class="articleTitle">
        <h1 id="article-title">你们要的学习方法来了</h1>
      </div>
      <div class="description">
        <span>发布日期:&nbsp; {{ new Date().toLocaleDateString() }}</span>
        <span>更新日期: {{ new Date().toLocaleDateString() }}</span>
        <span
          >分类:
          <span class="go-to" @click="switchTitle(category.type)">
            {{ category.name }}</span
          ></span
        >
      </div>
      <blockquote>
        <p class="short">{{ short }}</p>
      </blockquote>
      <div class="markdownContainer" v-html="article" v-highlight></div>
      <div class="positionList">
        <div class="markdown-toc-title">目录</div>
        <ol>
          <li v-for="item in aList" :key="item.id">
            <a :href="'#article-md-' + item.id">{{ item.text }}</a>
          </li>
        </ol>
      </div>
      <div class="end">{{ end }}</div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
export default {
  data() {
    return {
      category: {//类别信息
        name: "学习",
        type: "study",
      },
      short: "学习不应该是沉重的负担，而是愉悦的冒险",//短句
      article: "",//文章
      aList: [],//目录结构
      end: "<<完>>",//结束语
    };
  },
  methods: {
    switchTitle(type) {//切换侧边栏内容
      this.$router.push({
        path: "/type/" + type,
      });
    },
  },
  mounted() {
    this.$axios.get("/article2.md").then((res) => {
      res = marked(res.data);
      this.article = res;
      let reg = /<h1 style="color: '#333';font-weight: 400;font-size: 2em;line-height: 1.25;margin-bottom: 16px;padding-bottom: 0.3em;border-bottom: 1px solid #eaecef;">\s*\S*<\/h1>/g;
      let reg2 = />\s*\S*</g;
      let result = res.match(reg);

      result.forEach((h, i) => {
        h = h.match(reg2)[0];
        h = h.slice(1, h.length - 1);
        let str = "";

        this.aList[i] = {
          text: h,
          id: i,
        };
      });
    });

    let rendererMD = new marked.Renderer();
    marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
    });
    rendererMD.heading = function (text, level) {
      return `
        <h${level} style="color: '#333';font-weight: 400;font-size: 2em;line-height: 1.25;margin-bottom: 16px;padding-bottom: 0.3em;border-bottom: 1px solid #eaecef;">${text}</h${level}>
      `;
    };
    rendererMD.listitem = function (text, task) {
      return `
        <li style="margin:10px 0;line-height:1.8">${text}</li>
      `;
    };
    rendererMD.code = function (text, task) {
      return `
      <pre>
        <code>${text}</code>
      </pre>
      `;
    };
    rendererMD.blockquote = function (text, task) {
      return `
      <blockquote style="margin: 0;margin-top: 0;margin-bottom: 16px;padding: 0 1em;color: #6a737d;border-left: 0.25em solid #dfe2e5;">${text}</blockquote>
      `;
    };
    setTimeout(() => {
      let hList = document.querySelectorAll("h1");
      hList = [...hList].slice(1);
      hList.forEach((h, i) => {
        h.id = "article-md-" + i;
        this.aList[i] = {
          text: h.innerHTML,
          id: i,
        };
      });
    }, 100);
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
}
.markdownContainer {
  line-height: 1.8;
}

.articleContent {
  padding-right: 250px;
}
.articleContent .articleTitle h1 {
  font-size: 2em;
  color: #333;
  font-weight: 400;
  line-height: 1.7;
}

.articleContent .positionList {
  position: fixed;
  width: 250px;
  top: 0;
  right: 20px;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background: none;
  border-left: 1px solid #eee;
}
.articleContent .positionList li {
  line-height: 2.2;
}
.articleContent .positionList a {
  color: #2479cc;
}
.articleContent .positionList a:hover {
  text-decoration: underline;
}
.markdown-toc-title {
  text-align: center;
  margin: 1.5em 0;
}
.articleContent .description {
  color: #999;
  font-size: 0.9em;
  margin-bottom: 2em;
  line-height: 1.7;
}
.articleContent .description span:not(:first-child) {
  margin-left: 20px;
}
.go-to {
  margin-left: 10px;
  color: #2479cc;
  cursor: pointer;
}
blockquote {
  margin: 0;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}
.end {
  margin: 2em 0;
  letter-spacing: 0.3em;
  color: #999;
  text-align: center;
}
/* h1:not(:first-child),
#article-md-1 {
  color: #333;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.25;
  margin-bottom: 16px;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
} */
pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}
.language-js {
  color: #2479cc;
}
</style>